<template>
    <el-row class="main">
        <el-col class="posa">
           <el-row>
                <el-col class="bgf">
                    <el-col class="box box-pack-start box-algin-center">
                        <div class="tab cp" :class="{active:i == current}" v-for="(item,i) in tabList" :key="i"
                            @click="changeTab(i)">{{item.title}}</div>
                    </el-col>
                    <el-col>
                        <el-divider></el-divider>
                        <el-col class="shi">
                            <el-col  v-if="current == 0">
                                <edit-view :sj="sj"  ref="myRef" @update="ldsjInfo()"></edit-view>
                            </el-col>
                            <el-col v-if="current == 1" class="padd20">
                                <el-timeline>
                                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.createDate" placement="top" class="line">
                                      <el-card class="box box-tb box-pack-start box-align-start" shadow="none">
                                        <h4>{{activity.name}} - {{activity.info}}</h4>
                                        <p>{{activity.name}} 提交于 {{activity.createDate}}</p>
                                      </el-card>
                                    </el-timeline-item>
                                  </el-timeline>
                            </el-col>
                        </el-col>
                    </el-col>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
    import editView from './components/bjsj_jyzz.vue'
    export default {
        components:{editView},
        data() {
            return {
                sj:{},
                sjid:0,
                jyzid:this.$store.state.jyzid,
                tabList: [{
                        title: "实践详情"
                    },
                    {
                        title: "操作记录"
                    }
                ],
                tabList2: [{
                        title: "实践详情"
                    }
                ],
                current: 0,
                activities: [],
                maxRole:this.$store.state.maxRole,
            };
        },
        mounted() {
            if(this.maxRole=='team' || this.maxRole=='jyzz' || this.maxRole=='jyy'){

            }else{
                this.tabList=this.tabList2;
            }
            this.sjid = localStorage.getItem('ldsjId');
            this.ldsjInfo();
        },
        methods: {
            ldsjInfo(){
                this.$api.jyz.ldsjInfo({
                    'id': this.sjid
                }).then(res => {
                    if (res.code == '0') {
                        this.sj = res.info;
                        console.log(res);
                        if(this.current ==0){
                            this.$nextTick(()=>{
                                this.$refs.myRef.getEditData()
                            })
                        }
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            changeTab(i) {
                if(i==1){
                    this.$api.jyz.logsList({
                        'jyzid': this.jyzid,
                        'type':'2'
                    }).then(res => {
                        console.log(this.jyzid);
                        console.log(res);
                        if (res.code == '0') {
                            this.activities = res.list;
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                }else{
                   // this.$nextTick(()=>{
                   //     this.$refs.myRef.getEditData()
                   // })
                }
                this.current = i
            },
            clickEdit(sj) {
                this.$router.push({
                    name:'bjsj_jyzz'
                })
                localStorage.setItem('sj',JSON.stringify(sj))
            }
        }
    };
</script>

<style scoped lang="scss">
    .bgf {
        background-color: #fff;
        height: 100%;
    }

    .left {
        padding: 10px 0;
        min-width: 500px;
        background-color: #fff;

        .img {
            width: 218px;
            height: 120px;
            border-radius: 7px;
        }

        .bold {
            text-align: left;
            font-size: 18px;
        }

        .name {
            padding-left: 20px;
            // width: 220px;

            .edit {
                width: 76px;
                height: 26px;
                background: #FEF8F2;
                border: 1px solid #FF9B4F;
                border-radius: 13px;
                color: #FF9B4F;
                line-height: 26px;
                cursor: pointer;
            }
        }
    }

    .right {
        padding-right: 20px;

        .time {
            font-size: 14px;
            color: #5F6572;
        }

        .zb {
            width: 137px;
            height: 25px;
            background: #F3F4FB;
            border-radius: 5px 0px 0px 5px;
            color: #7F84E4;
            font-weight: 600;
        }
    }

    .tab {
        margin: 0 20px;
        padding: 20px 0;
        border-bottom: 4px solid #fff;

        &.active {
            border-bottom: 4px solid #626BF1;
            color: #626BF1;
        }

        &:hover {
            transition: ease-in-out .3;
            border-bottom: 4px solid #626BF1;
            color: #626BF1;
        }
    }

    .bgf>>>.el-divider--horizontal {
        margin: 0 20px;
        width: auto;
    }

    .row {
        box-sizing: border-box;
    }

    .hg100 {
        height: 100%;
    }

    .shi {
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        overflow-y: auto;
    }
    .item{
        .title{
            padding: 10px;
            width: 140px;
            text-align: right;
            font-weight: 600;
        }
        .cont{
            box-sizing: border-box;
            padding: 10px;
            width: 950px;
            height: 104px;
            background: #F8F9FC;
            border-radius: 10px;
            text-align: left;
        }
    }

    .line>>>.el-timeline-item__wrapper, .line>>>.el-card__body{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
    .main {
        position: relative;
        height: 100%;
    }

    .posa {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            overflow-y: hidden;
            background-color: #fff;
            height: 100%;

            h3 {
                font-size: 18px;
            }

            .label {
                display: block;
                width: 76px;
                height: 40px;
                line-height: 40px;
                font-weight: 600;
                font-size: 15px;
                margin-right: 10px;
            }
            .btn {
                display: flex;
            }
        }

</style>
